<template>
  <el-row :gutter="40" class="panel-group">
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
        <div class="card-panel-icon-wrapper icon-people">
          <svg-icon icon-class="peoples" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            用户认证已审核
          </div>
          <count-to :start-val="0" :end-val="count.certificationAudited" :duration="2600" class="card-panel-num" />
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('messages')">
        <div class="card-panel-icon-wrapper icon-message">
          <!-- <svg-icon icon-class="message" class-name="card-panel-icon" /> -->
          <svg t="1732338307496" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="3051" width="50" height="50">
            <path
              d="M669.215131 636.860702a30.104144 30.104144 0 0 0-12.64374-40.640595 448.250711 448.250711 0 0 0-71.647864-30.104144 301.041445 301.041445 0 1 0-285.38729 0A425.07052 425.07052 0 0 0 0 965.899001a30.104144 30.104144 0 1 0 60.208289 0c0-199.590478 171.593623-361.249734 382.322635-361.249733a398.879914 398.879914 0 0 1 186.043612 45.758299 30.104144 30.104144 0 0 0 40.640595-13.546865zM201.998809 301.500533a240.833156 240.833156 0 1 1 240.833156 240.833156 240.833156 240.833156 0 0 1-240.833156-240.833156zM1023.540912 990.885441l-90.312434-90.312433a165.873836 165.873836 0 1 0-33.716641 33.114559l90.312433 90.312433z m-331.145589-188.752986a105.364506 105.364506 0 1 1 105.364505 105.364506 105.364506 105.364506 0 0 1-105.364505-105.364506z"
              fill="#1296db" p-id="3052"></path>
          </svg>
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            用户认证待审核
          </div>
          <count-to :start-val="0" :end-val="count.certificationNotAudited" :duration="3000" class="card-panel-num" />
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('purchases')">
        <div class="card-panel-icon-wrapper icon-money">
          <!-- <svg-icon icon-class="money" class-name="card-panel-icon" /> -->
          <svg t="1732338504189" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="4760" width="50" height="50">
            <path
              d="M97.878 483.853c0-117.062-0.108-160.999-0.108-278.062 0-101.472 56.328-108.082 110.483-108.082h441.933c85.128 0 111.453 28.968 111.453 110.481v55.241c0 43.562-55.419 38.57-55.419 0V208.19c0-40.918-13.309-55.24-56.035-55.24H208.252c-45.746 0-55.241 6.203-55.241 55.24v552.407c0 30.278 16.572 55.241 55.241 55.241 67.004 0 43.482 0.026 110.484 0 33.77 0 36.252 55.241 0 55.241s-63.711 0.44-131.306 0.17c-39.867-0.163-72.883-23.774-84.643-60.322-3.292-10.223-4.694-21.525-4.694-32.34-0.323-116.658-0.215-178.076-0.215-294.734"
              fill="#1296db" p-id="4761"></path>
            <path
              d="M649.644 926.291c-152.344-0.027-275.666-123.537-275.666-276.122 0-152.586 123.915-276.259 276.529-276.042 152.616 0.215 275.884 124.022 275.722 276.878-0.16 152.236-123.807 275.314-276.585 275.286m0.756-496.868c-121.109-0.271-220.641 98.828-220.91 220.045-0.27 121.541 98.345 220.934 219.561 221.287 121.704 0.324 221.505-98.208 221.775-219.047 0.324-122.594-98.236-221.99-220.426-222.285M594.945 263.061c44.02 0.027 37.978 55.979 0 55.979h-331.45c-41.431 0-39.704-55.979 0-55.979 108.756-0.027 289.155-0.027 331.45 0zM318.736 428.782c44.021 0.028 37.979 55.98 0 55.98h-55.242c-41.431 0-39.704-55.98 0-55.98 108.757-0.027 12.948-0.027 55.242 0z"
              fill="#1296db" p-id="4762"></path>
            <path
              d="M785.502 547.22c-12.496-12.498-32.758-12.498-45.254 0L602.151 685.316l-42.191-42.191c-12.498-12.496-32.758-12.496-45.256 0-12.496 12.497-12.496 32.759 0 45.256l64.818 64.818c6.249 6.248 14.438 9.372 22.628 9.372s16.379-3.124 22.628-9.372a32.424 32.424 0 0 0 2.402-2.695 32.304 32.304 0 0 0 2.689-2.397l155.633-155.633c12.497-12.496 12.497-32.758 0-45.254z"
              fill="#1296db" p-id="4763"></path>
          </svg>
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            项目已审核
          </div>
          <count-to :start-val="0" :end-val="count.projectReviewed" :duration="3200" class="card-panel-num" />
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('shoppings')">
        <div class="card-panel-icon-wrapper icon-shopping">
          <!-- <svg-icon icon-class="shopping" class-name="card-panel-icon" /> -->
          <svg t="1732338391001" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="3237" width="50" height="50">
            <path
              d="M910.422866 893.19984 790.027242 772.662164c31.304559-42.578778 49.832623-95.126739 49.832623-151.932168 0-141.623697-115.085541-256.849246-256.539593-256.849246S326.784766 479.105277 326.784766 620.729996c0 141.625741 115.081453 256.850267 256.535505 256.850267 56.736958 0 109.221557-18.550547 151.750259-49.892918l120.396647 120.537677c7.590068 7.593134 17.531657 11.392766 27.478355 11.392766 9.947721 0 19.888287-3.799633 27.478355-11.393788C925.597892 933.026491 925.597892 908.39224 910.422866 893.19984zM583.320271 814.358994c-106.638052 0-193.38986-86.863202-193.38986-193.628998 0-106.765796 86.751808-193.627976 193.38986-193.627976 106.63703 0 193.39497 86.861158 193.39497 193.627976C776.71422 727.496814 689.957301 814.358994 583.320271 814.358994z"
              p-id="3238" fill="#1afa29"></path>
            <path
              d="M251.215202 631.364471c0-181.288878 146.780487-328.252295 327.843513-328.252295 110.880192 0 208.904176 55.11307 268.23588 139.472479l0-318.421078C847.294595 91.175856 820.559202 64.383234 787.579657 64.383234L161.910547 64.383234C128.933046 64.383234 102.195609 91.147242 102.195609 124.162555l0 775.672846C102.195609 932.824144 128.931002 959.616766 161.910547 959.616766l417.148168 0C397.995689 959.616766 251.215202 812.653349 251.215202 631.364471zM221.411896 183.747705c0-16.481086 13.343681-29.841118 29.804327-29.841118l447.0598 0c16.459625 0 29.804327 13.360032 29.804327 29.841118 0 16.480064-13.343681 29.841118-29.804327 29.841118L251.215202 213.588822C234.755577 213.588822 221.411896 200.227768 221.411896 183.747705z"
              p-id="3239" fill="#1afa29"></path>
          </svg>
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            项目待审核
          </div>
          <count-to :start-val="0" :end-val="count.projectNotAudited" :duration="3600" class="card-panel-num" />
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import CountTo from 'vue-count-to'
import request from '../../utils/request'

export default {
  data() {
    return {
      count: {
        certificationAudited: null,
        certificationNotAudited: null,
        projectReviewed: null,
        projectNotAudited: null
      }
    }
  },
  components: {
    CountTo
  },
  methods: {
    handleSetLineChartData(type) {
      this.$emit('handleSetLineChartData', type)
    },
    getCount() {
      request.get("/project/project/count").then(res => {
        this.count = res.data
      })
    }
  },
  created() {
    this.getCount()
  }
}
</script>

<style lang="scss" scoped>
.panel-group {
  margin-top: 18px;

  .card-panel-col {
    margin-bottom: 32px;
  }

  .card-panel {
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);

    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }

      .icon-people {
        background: #40c9c6;
      }

      .icon-message {
        background: #36a3f7;
      }

      .icon-money {
        background: #f4516c;
      }

      .icon-shopping {
        background: #34bfa3
      }
    }

    .icon-people {
      color: #40c9c6;
    }

    .icon-message {
      color: #36a3f7;
    }

    .icon-money {
      color: #f4516c;
    }

    .icon-shopping {
      color: #34bfa3
    }

    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-icon {
      float: left;
      font-size: 48px;
    }

    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;

      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        font-size: 20px;
      }
    }
  }
}

@media (max-width:550px) {
  .card-panel-description {
    display: none;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}
</style>
